/**
 * Created by xiangyufang on 2016/10/19.
 */
;(function($,window,document,undefined){
    $.fn.extend({
        loadLine: function(data,mark){
            var self = this;
            var dataset = data;
            var xMarks = mark;
            var w = self.width();
            var h = self.height();
            var padding = {top:10,left:50,bottom:40,right:40};
            var left = padding.left;
            var right = padding.right;
            var top = padding.top;
            var bottom = padding.bottom;
            var max = d3.max(dataset);
            var min = d3.min(dataset);
            if(max == 0){
                self.hide();
                $('#lineChart_null').show();
            }else{
                var svg = d3.select("#lineChart")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h)
                    .attr("x",0)
                    .attr("y",0);

                //横坐标比例尺
                var xScale = d3.scaleLinear()
                    .domain([0,10])
                    .range([left,w-right])
                    .nice();
                // 定义横轴网格线
                var xInner = d3.axisBottom()
                    .scale(xScale)
                    .tickSize(-(h-top-bottom),0,0)
                    .tickFormat("")
                    .ticks(10);
                // 添加横轴网格线
                var xInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate(0," + (h-bottom) + ")")
                    .call(xInner);
                xInnerBar.selectAll('text')
                    .text('');
                xInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                xInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义横轴
                var xAxis = d3.axisBottom()
                    .scale(xScale)
                    .ticks(10);
                // 添加横坐标轴
                var xBar = svg.append("g")
                    .attr('class', 'zy-x-axis')
                    .attr("transform","translate(0," + (h - bottom) + ")")
                    .call(xAxis);

                xBar.selectAll('text')
                    .text(function(d){
                        return xMarks[d];
                    })
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                xBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                xBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);


                //纵坐标比例尺
                var yScale = d3.scaleLinear()
                    .domain([min,max])
                    .range([h-bottom,top])
                    .nice();
                // 定义纵轴网格线
                var yInner = d3.axisLeft()
                    .scale(yScale)
                    .tickSize(-(w-left-right),0,0)
                    .tickFormat("");
                // 添加纵轴网格线
                var yInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate("+ left +",0)")
                    .call(yInner);
                yInnerBar.selectAll('text')
                    .text('');
                yInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                yInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义纵轴
                var yAxis = d3.axisLeft()
                    .scale(yScale);
                // 添加纵轴
                var yBar = svg.append("g")
                    .attr('class', 'zy-y-axis')
                    .attr("transform","translate(" + left + ","+"0)")
                    .call(yAxis);
                yBar.selectAll('text')
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                yBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                yBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering',0);

                // 折线
                var group = svg.append("g");

                var line = d3.line()
                    .x(function(d,i){
                        return xScale(i);
                    })
                    .y(function(d){
                        return yScale(d);
                    });

                group.append("path")
                    .attr('class', 'zy-line-path')
                    .attr("d",line(dataset))
                    .attr('stroke', '#03aeee')
                    .attr('fill', 'none')
                    .attr('stroke-width', 2)
                    .attr('shape-rendering', 'default');

                group.selectAll("circle")
                    .attr('class', 'zy-circle')
                    .data(dataset)
                    .enter()
                    .append("circle")
                    .attr("cx",function(d,i){
                        return xScale(i);
                    })
                    .attr("cy",function(d){
                        return yScale(d);
                    })
                    .attr("r",3)
                    .attr("fill","#ffffff")
                    .attr("stroke","#03aeee")
                    .attr("stroke-width","2px")
                    .on('mouseover',function(d,i){
                        d3.select(this)
                            .attr("r","5");
                        var tx=parseFloat(d3.select(this).attr("cx"));
                        var ty=parseFloat(d3.select(this).attr("cy"));
                        var $d3tip = $('<div class="d3-xyf-tip-box"></div>');
                        $d3tip.text('压差：' + d + 'MPa');
                        self.append($d3tip);
                        $d3tip.css({
                            'left': tx-20,
                            'top': ty+35
                        }).stop().show();
                    })
                    .on('mouseout',function(d,i){
                        d3.select(this)
                            .attr("r","3");
                        $('div.d3-xyf-tip-box').remove();
                    });
            }

        },
        loadPane: function( dataOne,dataTwo,mark){
            var self = this;
            var w = self.width();
            var h = self.height();
            var xMarks = mark;
            //var padding = 40;
            var padding = {top:10,left:50,bottom:40,right:40};
            var left = padding.left;
            var right = padding.right;
            var top = padding.top;
            var bottom = padding.bottom;
            var dataset = dataOne;
            var datasetTwo =dataTwo;
            //取两个数组的最大值
            var maxData = dataset.concat(datasetTwo);
            var intData = [];
            for(var x=0;x<maxData.length;x++){
                var intVal = parseInt(maxData[x]);
                intData.push(intVal);
            }
            var max = d3.max(intData);

            if(max == 0){
                self.hide();
                $('#JQ_data_bull').show();
            }else{
                var svg = d3.select("#paneChart")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h)
                    .attr("x",0)
                    .attr("y",0);

                //横坐标比例尺
                var xScale = d3.scaleLinear()
                    .domain([0,10])
                    .range([left,w-right]);
                // 定义横轴网格线
                var xInner = d3.axisBottom()
                    .scale(xScale)
                    .tickSize(-(h-top-bottom),0,0)
                    .tickFormat("")
                    .ticks(11);
                // 添加横轴网格线
                var xInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate(0," + (h-bottom) + ")")
                    .call(xInner);
                xInnerBar.selectAll('text')
                    .text('');
                xInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                xInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义横轴
                var xAxis = d3.axisBottom()
                    .scale(xScale)
                    .ticks(11);
                // 添加横坐标轴
                var paneX = (w-left-right)/11;
                var xBar = svg.append("g")
                    .attr('class', 'zy-x-axis')
                    .attr("transform","translate("+ (paneX/2) +"," + (h - bottom) + ")")
                    .call(xAxis);
                // 通过编号获取对应的横轴标签
                xBar.selectAll("text")
                    .text(function(d){
                        return xMarks[d];
                    })
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                xBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                xBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);



                //纵坐标比例尺
                var yScale = d3.scaleLinear()
                    .domain([0,max])
                    .range([h-bottom,top])
                    .nice();
                // 定义纵轴网格线
                var yInner = d3.axisLeft()
                    .scale(yScale)
                    .tickSize(-(w-left - right),0,0)
                    .tickFormat("");
                // 添加纵轴网格线
                var yInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate("+ left +",0)")
                    .call(yInner);
                yInnerBar.selectAll('text')
                    .text('');
                yInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                yInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义纵轴
                var yAxis = d3.axisLeft()
                    .scale(yScale);
                // 添加纵轴
                var yBar = svg.append("g")
                    .attr('class', 'zy-x-axis')
                    .attr("transform","translate(" + left + ","+"0)")
                    .call(yAxis);
                yBar.selectAll('text')
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                yBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                yBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering',0);

                //添加矩形元素
                var rexts = svg.selectAll("xyf-water-rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                    .attr("class","xyf-water-rect")
                    .attr("transform","translate(" + (paneX/2-20) +"," + bottom + ")")
                    .attr("x",function(d,i){
                        return xScale(i)
                    })
                    .attr("y",function(d){
                        return yScale(d) - bottom;
                    })
                    .attr("width",20)
                    .attr("height",function(d){
                        return h-bottom - yScale(d);
                    })
                    .style('fill','#fe8e07')
                    .on('mouseover',function(d){
                        d3.select(this)
                            .attr("r","5");
                        var tx=parseFloat(d3.select(this).attr("x"));
                        var ty=parseFloat(d3.select(this).attr("y"));
                        var $d3tip = $('<div class="d3-xyf-tip-box"></div>');
                        $d3tip.text('污水：' +d + 'kg');
                        self.append($d3tip);
                        $d3tip.css({
                            'left': tx+paneX/2-30,
                            'top': ty+bottom*2
                        }).stop().show();
                    })
                    .on('mouseout',function(){
                        $('div.d3-xyf-tip-box').remove();
                    });
                var rexts2 = svg.selectAll(".xyf-goods-rect")
                    .data(datasetTwo)
                    .enter()
                    .append("rect")
                    .attr("class","xyf-goods-rect")
                    .attr("transform","translate(" + (paneX/2+10) +"," + bottom + ")")
                    .attr("x",function(d,i){
                        return xScale(i)
                    })
                    .attr("y",function(d){
                        return yScale(d) -bottom;
                    })
                    .attr("width",20)
                    .attr("height",function(d){
                        return h-bottom  - yScale(d);
                    })
                    .style('fill','#28a7d9')
                    .on('mouseover',function(d){
                        d3.select(this)
                            .attr("r","5");
                        var tx=parseFloat(d3.select(this).attr("x"));
                        var ty=parseFloat(d3.select(this).attr("y"));
                        var $d3tip = $('<div class="d3-xyf-tip-box"></div>');
                        $d3tip.text('污物：' +d + 'kg');
                        self.append($d3tip);
                        $d3tip.css({
                            'left': tx+paneX/2,
                            'top': ty+bottom*2
                        }).stop().show();
                    })
                    .on('mouseout',function(){
                        $('div.d3-xyf-tip-box').remove();
                    });
            }
        }
    });
})(jQuery,window,document);

/*
;(function($,window,document,undefined){
    $.fn.extend({
        loadLine: function(data,mark){
            var self = this;
            var dataset = data;
            var xMarks = mark;
            var xLen = data.length;
            var w = self.width();
            var h = self.height();
            var padding = 40;
            var max = d3.max(dataset);
            var min = d3.min(dataset);
            if(max == 0){
                self.hide();
                $('#lineChart_null').show();
            }else{
                var svg = d3.select("#lineChart")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h)
                    .attr("x",0)
                    .attr("y",0);

                //横坐标比例尺
                var xScale = d3.scaleLinear()
                    .domain([0,xLen-1])
                    .range([padding,w-padding])
                    .nice();
                // 定义横轴网格线
                var xInner = d3.axisBottom()
                    .scale(xScale)
                    .tickSize(-(h-padding-padding),0,0)
                    .tickFormat("")
                    .ticks(xLen);
                // 添加横轴网格线
                var xInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate(0," + (h-padding) + ")")
                    .call(xInner);
                xInnerBar.selectAll('text')
                    .text('');
                xInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                xInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义横轴
                var xAxis = d3.axisBottom()
                    .scale(xScale)
                    .ticks(xLen);
                // 添加横坐标轴
                var xBar = svg.append("g")
                    .attr('class', 'zy-x-axis')
                    .attr("transform","translate(0," + (h - padding) + ")")
                    .call(xAxis);

                xBar.selectAll('text')
                    .text(function(d){
                        return xMarks[d];
                    })
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                xBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                xBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);


                var yScale;
                if(xLen>1){
                    //纵坐标比例尺
                    yScale= d3.scaleLinear()
                        .domain([min,max])
                        .range([h-padding,padding])
                        .nice();
                }else if(xLen=1){
                    //纵坐标比例尺
                    yScale= d3.scaleLinear()
                        .domain([0,max])
                        .range([h-padding,padding])
                        .nice();
                }

                // 定义纵轴网格线
                var yInner = d3.axisLeft()
                    .scale(yScale)
                    .tickSize(-(w-padding-padding),0,0)
                    .tickFormat("");
                // 添加纵轴网格线
                var yInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate("+ padding +",0)")
                    .call(yInner);
                yInnerBar.selectAll('text')
                    .text('');
                yInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                yInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义纵轴
                var yAxis = d3.axisLeft()
                    .scale(yScale);
                // 添加纵轴
                var yBar = svg.append("g")
                    .attr('class', 'zy-y-axis')
                    .attr("transform","translate(" + padding + ","+"0)")
                    .call(yAxis);
                yBar.selectAll('text')
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                yBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                yBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering',0);

                // 折线
                var group = svg.append("g");

                var line = d3.line()
                    .x(function(d,i){
                        return xScale(i);
                    })
                    .y(function(d){
                        return yScale(d);
                    });

                group.append("path")
                    .attr('class', 'zy-line-path')
                    .attr("d",line(dataset))
                    .attr('stroke', '#03aeee')
                    .attr('fill', 'none')
                    .attr('stroke-width', 2)
                    .attr('shape-rendering', 'default');

                group.selectAll("circle")
                    .attr('class', 'zy-circle')
                    .data(dataset)
                    .enter()
                    .append("circle")
                    .attr("cx",function(d,i){
                        return xScale(i);
                    })
                    .attr("cy",function(d){
                        return yScale(d);
                    })
                    .attr("r",3)
                    .attr("fill","#ffffff")
                    .attr("stroke","#03aeee")
                    .attr("stroke-width","2px")
                    .on('mouseover',function(d,i){
                        d3.select(this)
                            .attr("r","5");
                        var tx=parseFloat(d3.select(this).attr("cx"));
                        var ty=parseFloat(d3.select(this).attr("cy"));
                        var $d3tip = $('<div class="d3-xyf-tip-box"></div>');
                        $d3tip.text('压差：' + d + 'MPa');
                        self.append($d3tip);
                        $d3tip.css({
                            'left': tx-20,
                            'top': ty+35
                        }).stop().show();
                    })
                    .on('mouseout',function(d,i){
                        d3.select(this)
                            .attr("r","3");
                        $('div.d3-xyf-tip-box').remove();
                    });
            }

        },
        loadPane: function( dataOne,dataTwo,mark){
            var self = this;
            var w = self.width();
            var h = self.height();
            var sLen = dataOne.length;
            var xLen = sLen + 1;
            var xMarks = mark;
            var padding = 40;
            var dataset = dataOne;
            var datasetTwo =dataTwo;
            //取两个数组的最大值
            var maxData = dataset.concat(datasetTwo);

            var intData = [];
            for(var x=0;x<maxData.length;x++){
                var intVal = parseInt(maxData[x]);
                intData.push(intVal);
            }
            var max = d3.max(intData);

            if(max == 0){
                self.hide();
                $('#JQ_data_bull').show();
            }else{
                var svg = d3.select("#paneChart")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h)
                    .attr("x",0)
                    .attr("y",0);

                //横坐标比例尺
                var xScale = d3.scaleLinear()
                    .domain([0,sLen])
                    .range([padding,w-padding]);
                // 定义横轴网格线
                var xInner = d3.axisBottom()
                    .scale(xScale)
                    .tickSize(-(h-padding-padding),0,0)
                    .tickFormat("")
                    .ticks(xLen);
                // 添加横轴网格线
                var xInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate(0," + (h-padding) + ")")
                    .call(xInner);
                xInnerBar.selectAll('text')
                    .text('');
                xInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                xInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义横轴
                var xAxis = d3.axisBottom()
                    .scale(xScale)
                    .ticks(xLen);
                // 添加横坐标轴
                var paneX = (w-padding*2)/sLen;
                var xBar = svg.append("g")
                    .attr('class', 'zy-x-axis')
                    .attr("transform","translate("+ (paneX/2) +"," + (h - padding) + ")")
                    .call(xAxis);
                // 通过编号获取对应的横轴标签
                xBar.selectAll("text")
                    .text(function(d){
                        return xMarks[d];
                    })
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                xBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                xBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);



                //纵坐标比例尺
                var yScale = d3.scaleLinear()
                    .domain([0,max])
                    .range([h-padding,padding])
                    .nice();
                // 定义纵轴网格线
                var yInner = d3.axisLeft()
                    .scale(yScale)
                    .tickSize(-(w-padding - padding),0,0)
                    .tickFormat("");
                // 添加纵轴网格线
                var yInnerBar = svg.append("g")
                    .attr('class', 'zy-y-grid')
                    .attr("transform","translate("+ padding +",0)")
                    .call(yInner);
                yInnerBar.selectAll('text')
                    .text('');
                yInnerBar.selectAll('line')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                yInnerBar.selectAll('path')
                    .attr('stroke', '#f0f0f0')
                    .attr('shape-rendering', 'crispEdges');
                // 定义纵轴
                var yAxis = d3.axisLeft()
                    .scale(yScale);
                // 添加纵轴
                var yBar = svg.append("g")
                    .attr('class', 'zy-x-axis')
                    .attr("transform","translate(" + padding + ","+"0)")
                    .call(yAxis);
                yBar.selectAll('text')
                    .attr('font-size', '12px')
                    .attr('fill', '#666666');

                yBar.selectAll('line')
                    .attr('stroke', 'none')
                    .attr('shape-rendering', 0);

                yBar.selectAll('path')
                    .attr('stroke', 'none')
                    .attr('shape-rendering',0);

                //添加矩形元素
                var rexts = svg.selectAll("xyf-water-rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                    .attr("class","xyf-water-rect")
                    .attr("transform","translate(" + (paneX/2-20) +"," + padding + ")")
                    .attr("x",function(d,i){
                        return xScale(i)
                    })
                    .attr("y",function(d){
                        return yScale(d) - padding;
                    })
                    .attr("width",20)
                    .attr("height",function(d){
                        return h-padding - yScale(d);
                    })
                    .style('fill','#fe8e07')
                    .on('mouseover',function(d){
                        d3.select(this)
                            .attr("r","5");
                        var tx=parseFloat(d3.select(this).attr("x"));
                        var ty=parseFloat(d3.select(this).attr("y"));
                        var $d3tip = $('<div class="d3-xyf-tip-box"></div>');
                        $d3tip.text('污水量：' +d + 'kg');
                        self.append($d3tip);
                        $d3tip.css({
                            'left': tx+paneX/2-40,
                            'top': ty+padding*2
                        }).stop().show();
                    })
                    .on('mouseout',function(){
                        $('div.d3-xyf-tip-box').remove();
                    });
                var rexts2 = svg.selectAll(".xyf-goods-rect")
                    .data(datasetTwo)
                    .enter()
                    .append("rect")
                    .attr("class","xyf-goods-rect")
                    .attr("transform","translate(" + (paneX/2+10) +"," + padding + ")")
                    .attr("x",function(d,i){
                        return xScale(i)
                    })
                    .attr("y",function(d){
                        return yScale(d) -padding;
                    })
                    .attr("width",20)
                    .attr("height",function(d){
                        return h-padding  - yScale(d);
                    })
                    .style('fill','#28a7d9')

                    .on('mouseover',function(d){
                        d3.select(this)
                            .attr("r","5");
                        var tx=parseFloat(d3.select(this).attr("x"));
                        var ty=parseFloat(d3.select(this).attr("y"));
                        var $d3tip = $('<div class="d3-xyf-tip-box"></div>');
                        $d3tip.text('污物量：' +d + 'kg');
                        self.append($d3tip);
                        $d3tip.css({
                            'left': tx+paneX/2,
                            'top': ty+padding*2
                        }).stop().show();
                    })
                    .on('mouseout',function(){
                        $('div.d3-xyf-tip-box').remove();
                    });
            }
        }
    });
})(jQuery,window,document);*/
